import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'dva';
import { Form, Button, Modal, Input, Tag, Icon } from 'antd';
import style from './index.css';
const Standards: React.FC<any> = ({ form, onSuccess, dataSource = {}, type = 'add', index }) => {
    const [modalShow, setModalShow] = useState(false);
    const [tags, setTags] = useState([]);
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const inputRef: any = useRef();

    useEffect(() => {
        if (modalShow && dataSource && Object.keys(dataSource).length) {
            setTags(dataSource.tags);
        }
    }, [modalShow,dataSource])
    
    const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
    }

    const { getFieldDecorator } = form;

    const handleCreate = () => {
        setModalShow(true);
    }

    const handleClose = removedTag => {
        setTags(tags.filter(tag => tag !== removedTag));
    };

    const showInput = () => {
        setInputVisible(true);
        // setTimeout(() => {
        //     inputRef.current.focus();
        // }, 1000);
    };

    const handleInputChange = e => {
        setInputValue(e.target.value);
    };

    const handleInputConfirm = () => {
        let _tags: any = [];
        if (inputValue && (tags as any).indexOf(inputValue) === -1) {
            _tags = [...tags, inputValue];
        }
        setInputValue('');
        setTags(_tags);
        setInputVisible(false);
    };

    const handleConfigSubmit = () => {
        const { validateFields, resetFields } = form;
        validateFields((err, value) => {
            if (!err) {
                onSuccess && onSuccess({
                    ...value,
                    tags: tags
                }, type, index)
                resetFields();
                setTags([]);
            }
        })
    }

    return (
        <div>
            <Button type={'link'} onClick={handleCreate}>{type === 'add' ? '新建规格' : '修改'}</Button>
            <Modal
                visible={modalShow}
                title={'规格配置'}
                okText={'保存'}
                cancelText={'取消'}
                onOk={() => {
                    setModalShow(false);
                    handleConfigSubmit();
                }}
                onCancel={() => {
                    form.resetFields();
                    setTags([]);
                    setModalShow(false);
                }}
                width={500}
            >
                <Form>
                    <Form.Item {...formItemLayout} label={'规格名称'}>
                        {
                            getFieldDecorator('name', {
                                initialValue: dataSource.name,
                                rules: [{ required: true, message: '请输入规格名称' }],
                            })(<Input className={style.w220} placeholder={'请输入规格名称'} />)
                        }
                    </Form.Item>
                    <Form.Item {...formItemLayout} label={'规格参数'}>
                        <div>
                            {
                                tags && tags.length ? tags.map((tag: string, index: number) => <Tag key={tag} closable={true} onClose={() => handleClose(tag)}>{tag}</Tag>) : null
                            }
                            {inputVisible && (
                                <Input
                                    ref={inputRef as any}
                                    type="text"
                                    size="small"
                                    style={{ width: 78 }}
                                    value={inputValue}
                                    onChange={handleInputChange}
                                    onBlur={handleInputConfirm}
                                    onPressEnter={handleInputConfirm}
                                />
                            )}
                            {!inputVisible && (
                                <Tag className="site-tag-plus" onClick={showInput}>
                                    <Icon type={'plus'} /> 新增
                                </Tag>
                            )}

                        </div>
                    </Form.Item>
                    <Form.Item {...formItemLayout} label={'规格价格'}>
                        {
                            getFieldDecorator('price', {
                                initialValue: dataSource.price,
                                rules: [{ required: true, message: '请输入规格名称' }],
                            })(<Input className={style.w220} placeholder={'请输入规格名称'} />)
                        }
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}
const WrappedStandards = Form.create<any>({ name: 'modalForm' })(Standards);
export default connect((state: any) => {
    return {
    }
})(WrappedStandards);
